<template>
	<div :class="classes">
		<a
			v-if="to"
			:href="linkUrl"
			:target="target"
			class="ivu-cell-link"
			@click.exact="handleClickItem($event, false)"
			@click.ctrl="handleClickItem($event, true)"
			@click.meta="handleClickItem($event, true)"
		>
			<CellItem :title="title" :label="label" :extra="extra">
				<slot name="icon" slot="icon"></slot>
				<slot slot="default"></slot>
				<slot name="extra" slot="extra"></slot>
				<slot name="label" slot="label"></slot>
			</CellItem>
		</a>
		<div class="ivu-cell-link" v-else @click="handleClickItem">
			<CellItem :title="title" :label="label" :extra="extra">
				<slot name="icon" slot="icon"></slot>
				<slot slot="default"></slot>
				<slot name="extra" slot="extra"></slot>
				<slot name="label" slot="label"></slot>
			</CellItem>
		</div>
		<div class="ivu-cell-arrow" v-if="to">
			<slot name="arrow">
				<Icon :type="arrowType" :custom="customArrowType" :size="arrowSize" />
			</slot>
		</div>
	</div>
</template>
<script lang="ts">
	import CellItem from "./cell-item.vue";
	import Icon from "../icon/icon.vue";

	import { findComponentsUpward } from "../../utils/assist";
	import Anes from "../base";
	import { Prop, Component } from "vue-property-decorator";
	import CellGroup from "./cell-group.vue";
	const prefixCls = "ivu-cell";
	@Component({
		components: { CellItem, Icon }
	})
	export default class Cell extends Anes {
		@Prop([String, Number])
		name!: string | number;
		@Prop({ type: String, default: "" }) title!: string;
		@Prop({ type: String, default: "" }) label!: string;
		@Prop({ type: String, default: "" }) extra!: string;
		@Prop({ type: Boolean, default: false }) disabled!: boolean;
		@Prop({ type: Boolean, default: false }) selected!: boolean;

		prefixCls = prefixCls;
		cellGroup = findComponentsUpward<CellGroup>(this, "CellGroup");
		get classes() {
			return [
				`${prefixCls}`,
				{
					[`${prefixCls}-disabled`]: this.disabled,
					[`${prefixCls}-selected`]: this.selected,
					[`${prefixCls}-with-link`]: this.to
				}
			];
		}
		// 3.4.0, global setting customArrow 有值时，arrow 赋值空
		get arrowType() {
			let type = "ios-arrow-forward";

			if (this.$IVIEW) {
				if (this.$IVIEW.cell.customArrow) {
					type = "";
				} else if (this.$IVIEW.cell.arrow) {
					type = this.$IVIEW.cell.arrow;
				}
			}
			return type;
		}
		// 3.4.0, global setting
		get customArrowType() {
			let type = "";

			if (this.$IVIEW) {
				if (this.$IVIEW.cell.customArrow) {
					type = this.$IVIEW.cell.customArrow;
				}
			}
			return type;
		}
		// 3.4.0, global setting
		get arrowSize() {
			let size: string | number = "";

			if (this.$IVIEW) {
				if (this.$IVIEW.cell.arrowSize) {
					size = this.$IVIEW.cell.arrowSize;
				}
			}
			return size;
		}

		handleClickItem(event: Event, newWindow: boolean) {
			if (this.cellGroup && this.cellGroup.length > 0)
				this.cellGroup[0].handleClick(this.name as string);

			this.handleCheckClick(event, newWindow);
		}
	}
</script>